<template>
	<div class="modal1">
		<div class="modal1-header">
			<!-- 标题插槽 -->
			<slot name="header">Default Header</slot>
		</div>
		<div class="modal1-body">
			<!-- 内容插槽 默认命名-->
			<slot>Default Body Content</slot>
		</div>
		<div class="modal1-footer">
			<!-- 操作按钮插槽 -->
			<slot name="footer">
				<button>Close</button>
			</slot>
		</div>
	</div>
</template>

<style scoped>
	.modal1 {
		border: 1px solid #ccc;
		padding: 10px;
	}

	.modal1-header {
		font-weight: bold;
	}

	.modal1-footer {
		text-align: right;
	}
</style>